<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
    <style>
      #chart-h {
        display: flex;
        justify-content: space-between;
        height: 20px;
        padding-left: 28px;
        padding-right: 5.8%;
      }

      #chart-h div {
        text-align: center;
        flex: 1;
        height: 100%;
      }
      #chart-h input {
        text-align: center;
      }
      #chart-h div:hover {
        background-color: #ddd;
      }
    </style>
  </head>

  <body style="height: 100%; margin: 0">
    <div id="app">
      <div style="text-align: center;margin-bottom: 60px;;"><button @click="changeCount">切换周期</button></div>
      <div id="chart-h" class="chart-h">
        <div v-for="(item, key) in topShowData" :key="item.key" @click="clickdiv(item)">
          {{ exTopData(item) }}
        </div>
      </div>
      <echart-one :option="option" style="height: 400px;width: 100%;" />
    </div>
    <script type="text/javascript">
      let echartOne = {
        name: 'EchartOne',
        template: '<div ref="chartDom"></div>',
        props: {
          option: {
            type: Object,
            default: () => {},
          },
        },
        watch: {
          option: {
            handler(val) {
              this.myChart.setOption(val)
            },
            deep: true,
          },
        },
        mounted() {
          this.renderChart()
          window.addEventListener("resize",() => {
            this.myChart.resize();
          });
        },
        methods: {
          renderChart() {
            this.myChart = echarts.init(this.$refs.chartDom)
            this.myChart.setOption(this.option)
          },
        },
        beforeDestroy() {
          this.myChart.dispose()
          this.myChart = null
        },
      }

      new Vue({
        el: '#app',
        components: {
          [echartOne.name]: echartOne,
        },
        data() {
          return {
            data: [],
            option: {
              tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                  params = params[0];
                  let date = new Date(params.name);
                  return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + ' ' + date.getDate() +
                    '/' +
                    (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                  animation: false
                }
              },
              grid: {
                left: '0%',
                right: '7%',
                bottom: 40,
                containLabel: true,
              },
              xAxis: {
                type: 'time',
                splitLine: {
                  show: true
                },
                interval: 3000,
              },
              yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                  show: false
                }
              },
              series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: [],
                smooth: true,
              }]
            },
            now: '',
            n_now: '',
            n_day: '',
            c_now: '',
            c_day: '',
            c_month: '',
            c_year: '',
            c_hour: '',
            c_minutes: '',
            c_secounds: '',
            value: '',
            topData: [],
            topShowData: [],
            interval: 3000,
          }
        },
        watch: {
          topData: {
            handler(val) {
              if (val.length == 60) {
                this.topShowData = []
                if (this.interval == 3000) {
                  for (let i = 0; i < this.topData.length; i += 3) {
                    this.topShowData.push(this.topData.slice(i, i + 3));
                  }
                } else {
                  for (let i = 0; i < this.topData.length; i += 5) {
                    this.topShowData.push(this.topData.slice(i, i + 5));
                  }
                }
              }
            },
            deep: true,
          },
          interval: {
            handler(val) {
              if (val.length == 60) {
                this.topShowData = []
                if (this.interval == 3000) {
                  for (let i = 0; i < this.topData.length; i += 3) {
                    this.topShowData.push(this.topData.slice(i, i + 3));
                  }
                } else {
                  for (let i = 0; i < this.topData.length; i += 5) {
                    this.topShowData.push(this.topData.slice(i, i + 5));
                  }
                }
              }
            },
          }
        },
        created() {
          this.now = +new Date('2018-07-02 00:00:00');
          this.n_now = new Date(this.now);
          this.n_day = this.n_now.getDate();
          this.c_now = new Date();
          this.c_day = this.c_now.getDate();
          this.c_month = this.c_now.getMonth() + 1;
          this.c_year = this.c_now.getFullYear();
          this.c_hour = this.c_now.getHours();
          this.c_minutes = this.c_now.getMinutes() - 1;
          this.c_secounds = this.c_now.getSeconds();
          this.value = Math.random() * 100;

          if (this.n_day !== this.c_day) {
            this.now = +new Date(this.c_year + '-' + this.c_month + '-' + this.c_day + ' ' + this.c_hour + ':' +
              this.c_minutes + ':' + this.c_secounds);
          }

          let num = Math.floor((+new Date() - this.now) / 1000) <= 1 ? 1 : Math.floor((+new Date() - this.now) /
            1000);
          for (let i = 0; i < num; i++) {
            let temp_random = this.randomDataEmpty();
            this.data.push(temp_random);
            this.topData.push({
              key: temp_random,
              value: '',
            })
          }
        },
        mounted() {
          this.intervaldata = setInterval(() => {
            this.getChartData()
          }, 1000)
        },
        methods: {
          exTopData(data){
            let value = 0;
            for (let key1 in data) {
              if(data[key1].value){
                value += parseInt(data[key1].value)
              }
            }
            return value == 0?'':value
          },
          getChartData() {
            this.data.shift();
            this.topData.shift();
            if ((new Date(this.now)).getDate() !== this.c_day) { //给定日期与当天日期不符,刷新页面从新的一天开始
              window.history.go(0)
            }
            let temp_random = this.randomData();
            this.data.push(temp_random);
            this.topData.push({
              key: temp_random,
              value: '',
            })
            this.option.series[0].data = this.data;
            // console.log(this.option)
          },
          randomDataEmpty(val) {
            this.now = new Date(+this.now + 1000);
            this.value = this.value + Math.random() * 21 - 10;
            let valueName = this.now.getFullYear() + '/' + (this.now.getMonth() + 1) + '/' + this.now.getDate() +
              ' ' + (this.now.getHours() >= 10 ? this.now.getHours() : '0' + this.now.getHours()) + ':' +
              (this.now.getMinutes() >= 10 ? this.now.getMinutes() : '0' + this.now.getMinutes()) +
              ':' + (this.now.getSeconds() >= 10 ? this.now.getSeconds() : '0' + this.now.getSeconds());
          
            return {
              name: this.now.toString(),
              value: [
                valueName,
                ''
              ]
            }
          },
          randomData(val) {
            this.now = new Date(+this.now + 1000);
            this.value = this.value + Math.random() * 21 - 10;
            let valueName = this.now.getFullYear() + '/' + (this.now.getMonth() + 1) + '/' + this.now.getDate() +
              ' ' + (this.now.getHours() >= 10 ? this.now.getHours() : '0' + this.now.getHours()) + ':' +
              (this.now.getMinutes() >= 10 ? this.now.getMinutes() : '0' + this.now.getMinutes()) +
              ':' + (this.now.getSeconds() >= 10 ? this.now.getSeconds() : '0' + this.now.getSeconds());

            return {
              name: this.now.toString(),
              value: [
                valueName,
                Math.round(this.value)
              ]
            }
          },
          clickdiv(line) {
            let code = prompt("请输入剂量：");
            for(let i=0; i<this.topData.length; i++){
              if(this.topData[i].key == line[1].key){
                this.topData[i].value = Number(this.topData[i].value)+code
              }
            }
          },
          changeCount() {
            this.interval = this.interval == 3000 ? 5000 : 3000;
            this.option.xAxis.interval = this.interval;
          }
        },
        beforeDestroy() {
          clearInterval(this.intervaldata)
        },
      })


      // function clickdiv(e) {
      //   let code = prompt("请输入剂量：");
      //   event.target.innerHTML = code
      // }
      // var dom = document.getElementById("container");
      // var myChart = echarts.init(dom);
      // option = null;

      // var data = [];
      // var topdata = [];

      // var now = +new Date('2018-07-02 00:00:00');
      // var n_now = new Date(now);
      // var n_day = n_now.getDate();
      // var c_now = new Date();
      // var c_day = c_now.getDate();
      // var c_month = c_now.getMonth() + 1;
      // var c_year = c_now.getFullYear();
      // var c_hour = c_now.getHours();
      // var c_minutes = c_now.getMinutes() - 1;
      // var c_secounds = c_now.getSeconds()
      // var now_count = 5000;
      // var timer = null;
      // var timer2 = null;

      // var value = Math.random() * 100;
      // initDiv();
      // var num = Math.floor((+new Date() - now) / 1000) <= 1 ? 1 : Math.floor((+new Date() - now) / 1000);
      // for (var i = 0; i < num; i++) {
      //   data.push(randomData());
      // }

      // //模拟数据
      // function 
      // //div初始化
      // function initDiv() {
      //   if (n_day !== c_day) {
      //     now = +new Date(c_year + '-' + c_month + '-' + c_day + ' ' + c_hour + ':' + c_minutes + ':' + c_secounds);
      //   }
      //   let dom_chart_h = document.getElementById('chart-h');
      //   while (dom_chart_h.hasChildNodes()) {
      //     dom_chart_h.removeChild(dom_chart_h.firstChild);
      //   }
      //   let topnum = Math.floor((+new Date() - now) / now_count) <= 1 ? 1 : Math.floor((+new Date() - now) / now_count);
      //   console.log(Math.floor((+new Date() - now) / now_count) <= 1 ? 1 : Math.floor((+new Date() - now) / now_count))
      //   for (var i = 0; i < topnum / 2; i++) {
      //     var temp_div = document.createElement('div')
      //     temp_div.className = 'chart-h-div';
      //     temp_div.onclick = clickdiv;
      //     temp_div.innerHTML = '';
      //     dom_chart_h.appendChild(temp_div)
      //     topdata.push('')
      //   }
      // }

      // function initDiv2() {
      //   let dom_chart_h = document.getElementById('chart-h');
      //   while (dom_chart_h.hasChildNodes()) {
      //     dom_chart_h.removeChild(dom_chart_h.firstChild);
      //   }
      //   let num = now_count == 3000 ? 10 : 6;
      //   topdata = []
      //   for (var i = 0; i < num; i++) {
      //     var temp_div = document.createElement('div')
      //     temp_div.className = 'chart-h-div';
      //     topdata.push('')
      //     temp_div.onclick = clickdiv;
      //     temp_div.innerHTML = topdata[i];
      //     dom_chart_h.appendChild(temp_div)
      //   }
      // }
      // //div变化
      // function changeDiv(num) {
      //   var dom_chart_h = document.getElementById('chart-h');
      //   while (dom_chart_h.hasChildNodes()) {
      //     dom_chart_h.removeChild(dom_chart_h.firstChild);
      //   }
      //   for (var i = 0; i < num; i++) {
      //     let temp_div = document.createElement('div')
      //     temp_div.className = 'chart-h-div';
      //     temp_div.innerHTML = topdata[i];
      //     temp_div.onclick = clickdiv;
      //     dom_chart_h.appendChild(temp_div)
      //   }
      // }

      // function setTimer() {
      //   timer = setInterval(function() {
      //     data.shift();
      //     if ((new Date(now)).getDate() !== c_day) { //给定日期与当天日期不符,刷新页面从新的一天开始
      //       window.history.go(0)
      //     }

      //     data.push(randomData());
      //     myChart.setOption({
      //       series: [{
      //         data: data
      //       }]
      //     });
      //   }, 1000);
      // }

      // function setTimer2() {
      //   timer2 = setInterval(function() {
      //     topdata.shift()
      //     topdata.push('')
      //     let a_chart_h_div = document.getElementsByClassName('chart-h-div')
      //     for (let key1 in a_chart_h_div) {
      //       if (key1 != 'length' && key1 < a_chart_h_div.length - 1) {
      //         console.log(key1, parseInt(key1) + 1)
      //         a_chart_h_div[key1].innerHTML = a_chart_h_div[parseInt(key1) + 1].innerHTML
      //       } else {
      //         a_chart_h_div[key1].innerHTML = ''
      //       }
      //     }
      //   }, now_count);
      // }
      // setTimer()
      // setTimer2()
      // if (option && typeof option === "object") {
      //   myChart.setOption(option, true);
      // }
      // window.addEventListener("resize", function() {
      //   myChart.resize();
      // })
      // myChart.on('datazoom', function(param) {
      //   console.log(Math.ceil((param.end - param.start) * 20 / 100))
      //   changeDiv(Math.ceil((param.end - param.start) * 20 / 100))
      // })
      // //周期切换
      // function changeCount() {
      //   console.log(timer)
      //   clearInterval(timer)
      //   clearInterval(timer2)
      //   now_count = now_count == 3000 ? 5000 : 3000;
      //   console.log(now_count)
      //   option.xAxis.interval = now_count;
      //   initDiv2()
      //   myChart.setOption(option)
      //   setTimer()
      //   setTimer2()
      // }
      // document.getElementById('changeCount').onclick = changeCount
    </script>
  </body>

</html>
